<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--公共头部分-->
<div class="header" th:fragment="header" id="header">
    <div class="wrap">
        <div class="logo">
            <a href="index.html"><img src="/images/logo.png" alt=""/></a>
        </div>
        <div class="cssmenu">
            <ul>
                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="/page/ourTeam.html">我们的时光</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="about.html">About Us</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
        <div class="clear"></div>
    </div>
</div>
<!--公共底部分-->
<div class="footer" th:fragment="footer" id="footer">
    <div class="footer-top">
        <div class="wrap">
            <div class="section group">
                <div class="col_1_of_3 span_1_of_3">
                    <h3>About Us</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                        voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                    <button class="btn1 btn-8 btn-8b">Learn more</button>
                    <h4>Photo Stream</h4>
                    <div class="gallery">
                        <ul>
                            <li><a class="popup-with-zoom-anim" href="#small-dialog1"><img src="/images/g1.jpg" alt=""/></a>
                            </li>
                            <li><a class="popup-with-zoom-anim" href="#small-dialog1"><img src="/images/g2.jpg" alt=""/></a>
                            </li>
                            <li><a class="popup-with-zoom-anim" href="#small-dialog1"><img src="/images/g3.jpg" alt=""/></a>
                            </li>
                            <li><a class="popup-with-zoom-anim" href="#small-dialog1"><img src="/images/g4.jpg" alt=""/></a>
                            </li>
                            <li><a class="popup-with-zoom-anim" href="#small-dialog1"><img src="/images/g5.jpg" alt=""/></a>
                            </li>
                            <li><a class="popup-with-zoom-anim" href="#small-dialog1"><img src="/images/g6.jpg" alt=""/></a>
                            </li>
                            <div id="small-dialog1" class="mfp-hide">
                                <div class="pop_up">
                                    <h2>A Sample Photo Stream</h2>
                                    <img src="/images/g_zoom.jpg" alt=""/>
                                </div>
                            </div>
                        </ul>
                    </div>
                </div>
                <div class="col_1_of_3 span_1_of_3">
                    <h3>Latest tweets</h3>
                    <div class="footer-list">
                        <ul>
                            <li><img src="/images/tw.png" alt=""/>
                                <p>Lorem ipsum <span class="yellow"><a href="#">consectetuer</a></span> adipiscing elit,
                                    seddia<br><span class="small">&nbsp;web design</span></p>
                                <div class="clear"></div>
                            </li>
                            <li><img src="/images/tw.png" alt=""/>
                                <p>Lorem ipsum <span class="yellow"><a href="#">consectetuer</a></span> adipiscing elit,
                                    seddia<br><span class="small">&nbsp;web design</span></p>
                                <div class="clear"></div>
                            </li>
                            <li><img src="/images/tw.png" alt=""/>
                                <p>Lorem ipsum dolor sit amet, <span class="yellow"><a href="#">consectetuer</a></span>
                                    adipiscing elit, sed diam nonummy nibh<br><span
                                            class="small">&nbsp;web design</span></p>
                                <div class="clear"></div>
                            </li>
                            <li><img src="/images/tw.png" alt=""/>
                                <p>Lorem ipsum dolor sit amet, <span class="yellow"><a href="#">consectetuer</a></span>
                                    adipiscing elit, sed diam nonummy nibh<br><span
                                            class="small">&nbsp;web design</span></p>
                                <div class="clear"></div>
                            </li>
                            <li><img src="/images/tw.png" alt=""/>
                                <p>Lorem ipsum <span class="yellow"><a href="#">consectetuer</a></span> adipiscing elit,
                                    seddia<br><span class="small">&nbsp;web design</span></p>
                                <div class="clear"></div>
                            </li>
                        </ul>
                    </div>
                    <div class="social-icons">
                        <h4>Social Connecting</h4>
                        <ul>
                            <li class="facebook"><a href="#"><span> </span></a></li>
                            <li class="google"><a href="#"><span> </span></a></li>
                            <li class="twitter"><a href="#"><span> </span></a></li>
                            <li class="linkedin"><a href="#"><span> </span></a></li>
                            <li class="youtube"><a href="#"><span> </span></a></li>
                            <li class="bloger"><a href="#"><span> </span></a></li>
                            <li class="rss"><a href="#"><span> </span></a></li>
                            <li class="dribble"><a href="#"><span> </span></a></li>
                        </ul>
                    </div>
                </div>
                <div class="col_1_of_3 span_1_of_3">
                    <h3>Contact info</h3>
                    <div class="footer-list">
                        <ul>
                            <li><img src="/images/address.png" alt=""/>
                                <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit, sed diam nonummy nibh<br>&nbsp;web
                                    design</p>
                                <div class="clear"></div>
                            </li>
                            <li><img src="/images/phone.png" alt=""/>
                                <p>Phone: +1 800 258 2689<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+1
                                    800 258 2689 </p>
                                <div class="clear"></div>
                            </li>
                            <li><img src="/images/msg.png" alt=""/>
                                <p>Email: <span class="yellow"><a href="#">info(at)skokov.com</a></span></p>
                                <div class="clear"></div>
                            </li>
                        </ul>
                    </div>
                    <div class="follow">
                        <h4>Follow Us</h4>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p>
                        <div class="search">
                            <form>
                                <input type="text" value="">
                                <input type="submit" value="">
                            </form>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="wrap">
            <div class="copy">
                <p class="copy">Copyright &copy; 2014.Company name All rights reserved.More Templates <a
                        href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a
                        href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
            </div>
            <div class="footer-nav">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="ourteam.html">Portfolio</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="about.html">About Us</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>

</body>
</html>